/*
 * html5 page
**/
<template>
<div class="fullx">
	<div class="main">
		<iframe :src="dataInfo.link" frameborder="0" style="width: 100%; height: 100%;"></iframe>
	</div>
	<div class="body" v-if="!friendid">
		<div class="head" v-if="headShow">
			<p class="desc"><i class="horn"></i>浏览5秒后可获得<span>{{score}}积分</span>。</p>
			<a class="close" @click="closeHead">×</a>
		</div>
		<div class="btn-box">
			<a class="btn orange" v-tap="{methods:back}">返回</a>
			<a class="btn red" @click="closeDia(1)">如何获取积分</a>
		</div>
		<div class="layer" v-show="layershow">
			<div class="redbag"><span :class="{'on':scoreshow}">+{{score}}积分</span></div>
		</div>
		<div class="layer" v-if="seen">
			<div class="con" v-if="shared">
				<p>你已经邀请了 <span>{{scoreInfo.times}}</span> 个好友，</p>
				<p>获得了 <span>{{scoreInfo.score}}</span> 积分！</p>
				<p>分享获得更多积分吧！</p>
			</div>
			<div class="con" v-if="!shared">
				<p>您已预览过该内容，</p>
				<p>获得了 <span>{{score}}</span> 积分！</p>
				<p>快去分享获得更多积分吧！</p>
			</div>
			<i class="wzshare"></i>
			<i class="close" @click="closeShare"></i>
		</div>
		<div v-show="dialogShow">
			<div class="weui-dialog">
				<div class="weui-dialog-hd"><i class="coin"></i> <span style="color:#333">&nbsp;&nbsp;如何获取积分&nbsp;&nbsp; </span> <i class="coin"></i></div>
				<div class="weui-dialog-bd">
					<p class="dia-desc">1.预览5秒钟后才可获得{{score}}积分；</p>
					<p class="dia-desc">2.点击右上角"..."进行分享可获得更多积分；</p>
					<p class="dia-desc">3.每分享增加一次阅读可获得{{score}}积分，最高收益可获得{{21*score}}积分；</p>
					<p class="dia-desc">4.分享到朋友圈时，写点分享语可吸引朋友点击阅读哦；</p>
					<p class="dia-desc">5.分享到微信群中，收益更多更快；</p>
				</div>
				<div class="weui-dialog-ft"><a href="javascript:void(0)" class="modal-btn modal-btn-primary full-button" @click="closeDia(0)">朕知道了</a></div>
			</div>
			<div class="modal-maks" @click="closeDia(0)"></div>
		</div>
	</div>
	<!-- loading -->
	<div v-if="inGetData">
	    <div class="weui-mask_transparent"></div>
	    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
	        <i class="weui-loading weui-icon_toast"></i>
	        <p class="weui-toast__content">数据加载中</p>
	    </div>
	</div>
</div>
</template>
<script>
import {getWZTScore, judgeReward, shareRecord, isFirstWZT, getWZTInfo} from 'src/service/getData'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      inGetData: true, // loading
      geted: false, // 获取积分成功过
      friendid: '', // friendid
      dialogShow: false, // 如何取积分提示窗
      headShow: false, // 顶部提示
      layershow: false, // +积分
      scoreshow: false,
      score: 5, // 积分值
      seen: false,
      shared: false, // 分享加过积分
      dataInfo: {}, // 文章信息
      backHomeQuery: '/index', // 跳转路由
      appid: '',
      wzid: '',
      scoreInfo: {},
      timer: null
    }
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  beforeDestroy () {
    clearTimeout(this.timer)
    this.setShare(false, {})
  },
  mounted () {
    let query = {}
    setTimeout(() => {
      query = this.$route.query
      if (!query.appid) query = this.makeQuery()
      this.appid = query.appid
      this.friendid = query.friendid ? query.friendid : ''
      this.score = query.score
      this.wzid = query.wzid
      this.initData(query)
    }, 0)
    setTimeout(() => {
      this.inGetData = false
      if (!query.friendid) {
        this.firstUserInit()
      } else {
        this.setTimer()
      }
    }, 2000)
  },
  methods: {
    async initData (query) {
      let res = await getWZTInfo(this.appid)
      if (res.code === 0) {
        this.dataInfo = res.data
      }
      this.setShare(true, query)
    },
    async firstUserInit () {
      // 第一次打开文章
      if (!localStorage.firstH5) {
        this.dialogShow = true
        localStorage.firstH5 = true
      }
      // 第一次阅读该文章
      let firstRead = await isFirstWZT(this.appid, this.I9RIA.unionid)
      if (firstRead.data) {
        this.headShow = true
        this.setTimer()
      } else {
        let scoreInfo = await getWZTScore(this.appid, this.I9RIA.unionid)
        this.scoreInfo = scoreInfo.data
        if (scoreInfo.data.selfhas === 0) {
          this.setTimer()
        } else { // 得到分
          this.seen = true
          if (scoreInfo.data.score > 0) this.shared = true
        }
      }
    },
    async setTimer (code) {
      if (this.geted) return
      this.geted = true
      if (localStorage[this.appid]) return
      var _url = location.origin + '/play/tpl_wxmppage/?wzid=' + this.wzid + '&friendid=' + this.friendid
      if (!code) {
        let start = await judgeReward(this.appid, this.I9RIA.unionid, encodeURIComponent(_url), '')
        this.geted = false
        if (!start.data.code) return
        if (start.data.canFlag !== 1) {
          this.seen = true
          this.shared = true
          return
        }
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.setTimer(start.data.code)
        }, 5000)
      } else {
        let end = await judgeReward(this.appid, this.I9RIA.unionid, encodeURIComponent(_url), code)
        this.geted = true
        if (end.data.code === 1 && !this.friendid) {
          localStorage[this.appid] = 'x'
          this.layershowfn()
        }
      }
    },
    layershowfn () {
      this.layershow = true
      setTimeout(() => {
        this.scoreshow = true
      }, 100)
      setTimeout(() => {
        this.layershow = false
        this.scoreshow = false
      }, 1800)
      this.backHomeQuery += '?appid=' + this.appid + '&score=' + this.score // 成功加积分则在跳转时带上相应参数
    },
    setShare (iswzt, query) {
      var that = this
      var _url = location.origin + '/?wzid=' + query.wzid + '&appid=' + query.appid + '&title=' + encodeURIComponent(query.title) + '&icon=' + encodeURIComponent(query.icon) + '&friendid=' + this.I9RIA.unionid
      if (iswzt) {
        this.I9RIA.shareConfig.title = this.dataInfo.title
        this.I9RIA.shareConfig.imgUrl = query.icon
        this.I9RIA.shareConfig.link = _url + '#/html5'
        this.I9RIA.shareConfig.desc = this.dataInfo.desc
        this.I9RIA.shareConfig.success = function () {
          shareRecord(that.appid, _url)
        }
      } else {
        this.I9RIA.shareConfig.title = '玩赚'
        this.I9RIA.shareConfig.link = location.origin
        this.I9RIA.shareConfig.imgUrl = location.origin + '/static/imgs/wi.jpg'
        this.I9RIA.shareConfig.desc = '玩游戏赢大奖，更多惊喜等你拿！和我一起玩赚吧~  '
        this.I9RIA.shareConfig.success = function () {}
      }
      console.log(this.I9RIA)
    },
    back () {
      // this.setShare()
      this.$router.push(this.backHomeQuery)
    },
    closeDia (bln) {
      this.dialogShow = bln
    },
    closeHead () {
      this.headShow = false
    },
    closeShare () {
      this.seen = false
    },
    makeQuery () {
      var param = location.search.substr(1).split('&')
      var q = {}
      for (var i = 0; i < param.length; i++) {
        var pra = param[i].split('=')
        q[pra[0]] = pra[1]
      }
      return q
    }
  }
}
</script>
<style scoped>
	.main{overflow-y:auto;height: 100%;-webkit-overflow-scrolling : touch;}
	.btn-box{position: absolute; bottom: 0.2rem; width: 100%; text-align: center;}
	.btn-box .btn{width:1.1rem;line-height:0.35rem;font-size: 0.13rem;text-align: center;color:#fff;display: inline-block;border-radius:22px;margin:0 0.18rem;}
	.btn-box .btn.orange{background:#ffa200;}
	.btn-box .btn.red{background:#ff602a;}
	.head{background: rgba(0,0,0,0.8); position: absolute; top: 0; width: 100%; color: #fff; font-size: 0.1rem; line-height: 0.3rem;}
	.head span{color:#ffa200;}
	.head .horn{width:0.2rem;height:0.2rem;background:url(../../../assets/imgs/icon_horn.png) no-repeat;background-size: 100%;display:inline-block;vertical-align: middle;margin: 0 15px;}
	.head .close{position: absolute; color: #fff; right: 0; top: 0; width: 0.3rem; text-align: center; font-size: 0.2rem;}
	.coin{width:0.2rem;height:0.2rem;background:url(../../../assets/imgs/credits.png) no-repeat;background-size: 100%;display:inline-block;vertical-align: middle;}
	.dia-desc{text-align: left;}
	.layer{position: absolute; width: 100%; top: 0; left: 0; height: 100%; background: rgba(0,0,0,0.6);opacity:1;}
	.layer .close{background:url(../../../assets/imgs/icon-close.png) no-repeat;background-size: 100%;position: absolute; bottom: 1rem; width: 0.44rem; height: 0.44rem;left: 1.6rem;}
	.layer .con{color: #fff; margin: 0.6rem 0.4rem;}
	.layer .con span{color: #ff602a;}
	.layer .wzshare{background:url(../../../assets/imgs/wztshare.png) no-repeat;background-size: 100%;width: 0.85rem; height: 1.2rem; position: absolute; top: 10px; right: 20px;}
	.redbag{width: 2.1rem; height: 2.2rem;background:url(../../../assets/imgs/redbag.png) no-repeat;background-size: 100%;margin: 2rem auto;text-align: center;}
	.redbag span{color: #ffdd00; font-size: 0.3rem;position: relative;top:2rem;opacity:0;transition:all .3s ease-in-out;}
	.redbag span.on{opacity:1;top:1.3rem;}
	.weui-dialog{width:3.5rem;}
</style>
